<template>
    <el-main>
        <div style="border-bottom: 1px solid rgb(204, 204, 204);">
            <h3>设备档案</h3>
            <h4 style="margin:15px 0">设备档案列表</h4>
        </div>
        <div style="margin-top: 15px">
            <el-button type="success" @click="addToVue" round>新增</el-button>
            <el-button type="danger" @click="delEquipmentArchives" round>删除</el-button>
            <el-button type="primary" round>生成二维码</el-button>
            <el-button type="primary" round>故障报修</el-button>
            <el-button type="primary" round>设备维修</el-button>
            <el-button type="primary" round>设备保养</el-button>
            <el-button type="primary" round>导出</el-button>
            <el-button type="primary" round>导入</el-button>
            <div style="margin-left: 1200px;margin-top: -30px">
                <el-input placeholder="请输入存放位置" size="medium" v-model="devicename" class="input-with-select"
                          style=" width: 400px;">
                    <el-button slot="append" icon="el-icon-search" @click="selBySpare"></el-button>
                </el-input>
                <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9"
                   @click="showSpare = true"></i>
            </div>

        </div>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="archivesId" label="序号"></el-table-column>
                <el-table-column prop="currentStatus" label="当前状态"></el-table-column>
                <el-table-column prop="equipmentNumber" label="设备编号"></el-table-column>
                <el-table-column prop="devicename" label="设备名称"></el-table-column>
                <el-table-column prop="specificationsModels" label="规格型号"></el-table-column>
                <el-table-column prop="deviceType" label="设备类型" :formatter="formatDeviceTypes"></el-table-column>
                <el-table-column prop="placeForStorage" label="存放位置" :formatter="formatPlaceForStorage" ></el-table-column>
                <el-table-column prop="userDepartment" label="使用部门" :formatter="formatUserDepartment" ></el-table-column>
                <el-table-column prop="principal" label="负责人" :formatter="formatPrincipal" ></el-table-column>
                <el-table-column prop="phone" label="联系方式"></el-table-column>
                <el-table-column prop="activationDate" label="启用日期"></el-table-column>
                <el-table-column prop="totalPower" label="总功率（KW）"></el-table-column>
                <el-table-column prop="productionDate" label="出厂日期"></el-table-column>
                <el-table-column prop="manufacturer" label="生产厂商"></el-table-column>
                <el-table-column prop="serviceLife" label="使用寿命"></el-table-column>
                <el-table-column prop="buyingPrice" label="购买价格"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column prop="updateTime" label="操作时间"></el-table-column>
            </el-table>
            <!-- 分页功能-->
            <el-pagination
                :current-page.sync="EquipmentArchives.page"
                :page-size="EquipmentArchives.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0; text-align: center"
                @current-change="selEquipmentArchives"
                @size-change="handleSizeChanges"
            />
        </div>


        <!--弹出层模糊查信息-->
        <div v-if="showSpare"
             style="width: 700px;height: 270px;background: white;position: relative;left: 760px;top:-504px;z-index: 900;border: 1px solid #F4F4F4;border-radius: 4px">
            <el-form ref="form" :model="EquipmentArchives" label-width="100px">
                <el-form-item label="设备编号" style="margin-top: 20px">
                    <el-input v-model="EquipmentArchives.equipmentNumber" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input v-model="EquipmentArchives.specificationsModels" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="存放位置">
                    <el-input v-model="EquipmentArchives.placeForStorage" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="使用部门">
                    <el-cascader
                            v-model="EquipmentArchives.userDepartment"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="启用时间">
                    <el-date-picker type="datetime" v-model="EquipmentArchives.activationDate"></el-date-picker>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-select v-model="EquipmentArchives.operator" placeholder="请选择操作人"
                               @focus="showOperatorDialog">
                        <el-option v-for="operator in peopleData" :key="operator.peopleManagementId"
                                   :label="operator.peopleManagementName"
                                   :value="operator.peopleManagementName"></el-option>
                    </el-select>
                </el-form-item>
                <div style="margin-left: 320px;position: relative;top: -190px">
                    <el-form-item label="设备名称">
                        <el-input v-model="EquipmentArchives.devicename" style="width: 180px;"></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型">
                        <el-cascader
                            v-model="EquipmentArchives.deviceType"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="当前状态">
                        <el-select v-model="EquipmentArchives.currentStatus" placeholder="请选择活动区域">
                            <el-option label="启动" value=1></el-option>
                            <el-option label="停用" value=2></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="负责人">
                        <el-cascader
                            v-model="EquipmentArchives.principal"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="操作时间">
                        <el-date-picker type="datetime" v-model="spareLedger.updateTime"></el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
            <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: -170px">
                <el-button @click="showSpare =  false">关闭</el-button>
                <el-button @click="empty()" style="margin-top: 10px;margin-left: 20px">清空</el-button>
                <div style="margin-left: 590px;margin-top: -28px">
                    <el-button type="success" @click="selBySpare">查询</el-button>
                </div>
            </div>
        </div>

    </el-main>
</template>

<script>
export default {
    name: "EquipmentArchives",
    data() {

        return {
            //设备类型数据
            deviceTypes: [],
            //设备存放位置数据
            placeForStorages:[],
            //设备使用部门数据
            userDepartments:[],
            //设备负责人数据
            Principals:[],
            multipleSelection: [],//多选框选择数据
            tableData: [],
            //模糊查数据
            devicename:null,
            //当showSpare为true时，打开模糊查窗口
            showSpare: false,
            EquipmentArchives: {
                page: 1,
                pageSize: 10,
                equipmentNumber: null,//设备编号
                devicename: null,//设备名称
                specificationsModels: null,//规格型号
                deviceType: null,//设备类型
                placeForStorage: null,//存放位置
                currentStatus: null,//当前状态
                userDepartment: null,//使用部门
                principal: null,//负责人
                activationDate: null,//启用日期
                operator:null,//操作人
                updateTime:null ,//操作时间


            },
            //分页数据
            total: 0,
            names: '',
            dialog: false, //抽屉弹窗开关
            loading: false,
            timer: null,//表单动画所需属性
            isEdit: true,//判断是新增还是修改，true是修改，false为新增

        }


    },
    methods: {

        //设备类型回显名称
        formatDeviceTypes(row) {
            const Id = row.deviceType;
            const Obj = this.deviceTypes.find(obj => obj.id === Id);
            return Obj ? Obj.typeName : '';
        },
        //设备存放位置回显名称
        formatPlaceForStorage(row){
            const Id = row.placeForStorage;
            const Obj = this.placeForStorages.find(obj => obj.id === Id);
            return Obj ? Obj.locationName : '';
        },
        //设备使用部门回显名称
        formatUserDepartment(row) {
            const Id = row.userDepartment;
            const Obj = this.userDepartments.find(obj => obj.departmentManagementId === Id);
            return Obj ? Obj.departmentName : '';
        },
        //设备负责人回显名称
        formatPrincipal(row) {
            const Id = row.principal;
            const Obj = this.Principals.find(obj => obj.peopleManagementId === Id);
            return Obj ? Obj.peopleManagementName : '';
        },

        //查询设备类型信息
        selDeviceType() {
            this.request.get("device/equipment-archives/selDeviceTypes").then(res => {
                console.log(res)
                this.deviceTypes = res.data
            })
        },
        //查询设备负责人信息
        selPrincipals() {
            this.request.get("system/people-management/selPrincipals").then(res => {
                console.log(res)
                this.Principals = res.data
            })
        },
        //查询设备存放位置信息
        selPlaceForStorages() {
            this.request.get("device/equipment-archives/selPlaceForStorages").then(res => {
                console.log(res)
                this.placeForStorages = res.data
            })
        },
        //查询设备使用部门信息
        selUserDepartment() {
            this.request.get("system/department-management/selUserDepartment").then(res => {
                console.log(res)
                this.userDepartments = res.data
            })
        },

        //批量删除
        delEquipmentArchives() {
            console.log(this.multipleSelection)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //获取删除对象id

                var ids = this.multipleSelection.map(obj => obj.archivesId);
                console.log(ids)
                this.request.post("device/equipment-archives/delEquipmentArchives", ids
                ).then(res => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'

                        });
                        this.selEquipmentArchives()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },




        //跳转新增页面
        addToVue() {
            this.$router.push('/AddEquipmentArchives')
        },
        //模糊查按钮
        selBySpare() {
            this.selEquipmentArchives()
        },
        //清空
        empty() {

        },
        //分页模糊全查类型信息
        selEquipmentArchives() {
            if (this.devicename == '') {
                this.this.EquipmentArchives.devicename = null
                this.request.post("device/equipment-archives/selEquipmentArchives", this.EquipmentArchives).then(res => {
                    this.tableData = res.data.content
                    this.total = res.data.total
                    console.log(this.tableData)
                })
            } else {
                this.EquipmentArchives.devicename = this.devicename
                this.request.post("device/equipment-archives/selEquipmentArchives", this.EquipmentArchives).then(res => {
                    this.tableData = res.data.content
                    this.total = res.data.total
                })
            }

        },
        //分页跳转数据
        handleSizeChanges(pageSize) {
            this.EquipmentArchives.pagesize = pageSize;
            console.log(this.EquipmentArchives.pagesize)
            this.selEquipmentArchives();
        },
        //多选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    //打开页面默认执行
    created() {
        this.selEquipmentArchives()
        this.selDeviceType()
        this.selPlaceForStorages()
        this.selUserDepartment()
        this.selPrincipals()

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    }, //如果页面有keep-alive缓存功能，这个函数会触发

}
</script>

<style scoped>
.el-main {
    padding: 0;
}
</style>
